<template>
	<view>

		<picker-view :indicator-style="indicatorStyle" @change="onchange" class="picker-view" >
			<picker-view-column >
				<view class="item" v-for="(item,index) in heightA" :key="index">{{item}}kg</view>
			</picker-view-column>
			
			<picker-view-column >
				<view class="item" v-for="(item,index) in heightB" :key="index">{{item}}kg</view>
			</picker-view-column>
		</picker-view>

		<view class="bomPosition">
			<button type="primary" @click="submit">保存</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indicatorStyle: `height: 50px;`,
				heightA: [],
				heightB: [],
				value: [0,0],
				list: [{
						name: '中国',
					},
					{
						name: '海外国家',
					}
				]
			};
		},
		onLoad() {
			for(let i = 30;i<200;i++) {
				this.heightA.push(i)
			}
			for(let j = 31;j<200;j++) {
				this.heightB.push(j)
			}
		},
		methods: {
			onchange(e) {	
				console.log(e);
				let num = e.detail.value[0]
				if(num!=this.value[0]) {
					console.log('++--');
					this.heightB = []
					for(let j = this.heightA[num];j<230;j++) {
						this.heightB.push(j)
					}
				}else {}
				this.value = e.detail.value
			},
			submit() {
				let height = this.heightA[this.value[0]]+'-'+this.heightB[this.value[1]]
				uni.$emit('weightFnI', height)
				uni.navigateBack({
					delta: 1
				})
			},
			bindChange(e) {
				
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
	.picker-view {
		width: 750rpx;
		height: 600rpx;
		margin-top: 20rpx;
		background-color: #f6f6f6 !important;
		/deep/ picker-view-column {
			background-color: #f6f6f6 !important;
		}
	}
	/deep/ picker-view-column {
		background-color: #f6f6f6 !important;
	}

	.item {
		line-height: 100rpx;
		text-align: center;
		font-weight: 600;
		font-size: 32rpx;
	}
</style>
